<template>
	<view class="container">
		<view class="top-bg">
		</view>
		<view class="login-form">
			<view class="form-group">
				<view class="form-title"><uni-icons color="#3079bd" type="phone" size="26"></uni-icons></view>
				<input placeholder="请输入手机号" v-model="telphone"></input>
			</view>
			<view class="form-group">
				<view class="form-title"><uni-icons color="#3079bd" type="locked" size="26"></uni-icons></view>
				<input placeholder="请输入新密码" v-model="password" :password="!showPassword"></input>
			</view>
			<view class="form-group">
				<view class="form-title"><uni-icons color="#3079bd" type="locked" size="26"></uni-icons></view>
				<input placeholder="请输入确认密码" v-model="confirmPassword" :password="!showPassword"/>
			</view>
			<view>
				<button :loading="loading" @tap="confirm" class="confirm-btn">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			telphone: '',
			password: '',
			confirmPassword:'',
			showPassword: false, //是否显示明文
		}
	},
	methods:{
		confirm(){
			uni.redirectTo({
				url:'/pages/login/index'
			})
		}
	}
}
</script>

<style>
	.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 100%;
	  position: relative;
	  background-color: #f8f8f8;
	  /* background: linear-gradient(to 80vh, #4191ea,#83c6ed); */
	  height: 100vh;
	}
	.top-bg {
	  position: absolute; 
	  top: 0;
	  left: 0;
	  right: 0;
	  height: 50%;
	  background: linear-gradient(to bottom, #4191ea, #83c6ed); /* 渐变背景颜色 */
	  /* background-color: #4191ea; */
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  border-radius: 0 0 20rpx 20rpx;
	}
	.title {
	  font-size: 35rpx; /* 根据需要调整字体大小 */ 	
	  color: #ffffff; /* 文字颜色 */
	  margin-top: -400rpx;
	}
	.login-form {
	  position: absolute;
	  top: 20%; /* 垂直居中 */
	  height: 600rpx;
	  width: 460rpx;
	  background-color: #ffffff;
	  padding: 100rpx;	
	  border-radius: 8px;
	  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
	  display: flex; /* 新增 */
	  flex-direction: column; /* 新增 */
	  justify-content: space-between; /* 新增 */
	  align-items: center; /* 新增 */
	}
	.form-group {
	  display: flex;
	  margin-bottom: 50rpx;
	  font-size: 25rpx;
	  width: 100%;
	  border-bottom: 2rpx solid #ddd; /* 添加下划线 */
	  align-items: center;
	}
	
	.form-title {
	  margin-right: 10px;
	}	
	
	.checkCode{
	  color: #4c8ce8;
	  font-size: 30rpx;
	  margin-left: auto;
	  cursor: pointer; /* 鼠标悬停时显示手形光标 */
	  font-size: 25rpx;
	}
	
	input {
	  width: 100%;
	  padding: 10px;
	  border: none; /* 移除默认边框 */
	}
	.confirm-btn{
	  background-color: #4b9eee;
	  color: #ffffff;
	  width: 300rpx;
	  height: 80rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 30rpx;
	}
</style>

